<template>
    <div class="listenLsit_container">
        <!-- 头部 -->
        <header class="header">
            <img :src="xmly" class="logo_icon" @click="toHome">
            <van-search shape="round" class="input_search" placeholder="搜索" />
            <div class="open_button">打开APP</div>
        </header>
        <!-- 导航 -->
        <div class="tab_nav" v-show="isShowNav">
            <div class="tab_lsit">
                <van-tabs color="red" title-inactive-color="#A3A3AC" v-if="isShow" v-model:active="active"
                    @click-tab="handleTab" title-active-color="red">
                    <van-tab v-for="(navItem) in lsitenNavList" :key="navItem.cid" :title="navItem.title">
                    </van-tab>
                </van-tabs>

                <div v-else class="text_select">请选择分类</div>
            </div>
            <div class="select_target" @click="handleChange">
                <van-icon v-if="isShow" name="arrow-down" color="#A3A3AC" />
                <van-icon v-else name="arrow-up" color="#A3A3AC" />
            </div>
        </div>
        <!-- 分类 -->
        <div class="category" v-show="!isShow">
            <div class="category_lsit">
                <div class="category_item" @click="handleChangeCategory(navItem.name, index)"
                    v-for="(navItem, index) in lsitenNavList" :key="navItem.cid">{{ navItem.title }}</div>
            </div>
        </div>
        <!-- 内容列表 -->
        <div class="content_list" ref="aaa">
            <div class="content_item" v-for="authorItem in categorySubjectList" :key="authorItem.id">
                <a :href="`https://m.ximalaya.com/revision/subject/category${authorItem.url}`" class="content_item">
                    <img :src="authorItem.coverPathSmall">
                    <div class="text_content">
                        <div class="title">{{ authorItem.title }}</div>
                        <div class="play_num_renew">
                            <img :src="bf" class="bf_icon">
                            <div class="play_num">12</div>
                            <div class="renew">2021-8-27更新</div>
                        </div>
                    </div>
                </a>

            </div>

        </div>


    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import ListenListRequset from '@/api/listen-list'
import { NavList } from '@/type/resType/listenListResType'
import router from '@/router/index'
import xmly from '@/static/images/xmly.jpg'
import bf from '@/static/images/bf.png'
const isShow = ref(true)
const active = ref(0);
const isShowNav = ref(true)
// 导航列表数据
const lsitenNavList = ref<NavList>([])
// 某个分类的听单列表数据
const categorySubjectList = ref<any>([])
let name = ref('')
let pageName = 1
let pageSize = 20
const aaa = ref<HTMLElement>()


// 组件一挂载执行
onMounted(() => {
    getLsitenNavList()
    getCategorySubjectList('youshengshu')
})

// 跳转到主页的回调函数
function toHome() {
    router.push('/')
}
// 获取导航列表的功能函数
async function getLsitenNavList() {
    try {
        const result = await ListenListRequset.getLsitenNavList()
        if (result.ret === 200) {
            lsitenNavList.value = result.data.categories
        }
    } catch (error) {
        console.log(error);

    }
}

// 点击tap执行的回调函数
function handleTab(e: any) {
    name.value = lsitenNavList.value[e.name].name
    nextTick(() => {
        getCategorySubjectList(name.value)
    })

}

// 获取某个分类的听单列表数据
async function getCategorySubjectList(tabName: string) {

    try {
        const result = await ListenListRequset.getCategorySubjectList(tabName, pageName, pageSize)
        if (result.ret === 200) {
            // console.log(result.data.subjects);

            categorySubjectList.value = result.data.subjects
        }
    } catch (error) {
        console.log(error);

    }
}
// 点击分类数据执行的回调函数
function handleChangeCategory(navItem: string, index: number) {
    getCategorySubjectList(navItem)
    active.value = index
    isShow.value = true
}

// 操作是否显示的回调函数
function handleChange() {
    isShow.value = !isShow.value
}

</script>

<style  scoped lang="less">
.listenLsit_container {
    position: relative;

    // 头部
    .header {
        position: sticky;
        top: 0px;
        display: flex;
        justify-content: space-between;
        height: 30px;
        align-items: center;
        padding: 15px 15px 5px 15px;
        background: #fff;

        .logo_icon {
            width: 75px;
            height: 15px;
            background: pink;
        }

        .input_search {
            // --van-search-content-background : yellow;
            --van-search-padding: 0px 10px;
            --van-search-input-height: 30px;
        }

        .open_button {
            width: 67px;
            height: 28px;
            font-size: 12px;
            line-height: 30px;
            color: #f86442;
            text-align: center;
            border: 1px solid #f66847;
            border-radius: 20px;
        }

    }

    // 导航
    .tab_nav {
        height: 45px;
        font-size: 14px;
        border-bottom: 1px solid #e5e3e3;
        display: flex;

        .tab_lsit {
            width: 88.6%;
            color: #A3A3AC;

            :deep(.van-tab--active) {
                font-size: 18px;
            }
        }

        .text_select {
            width: 88.6%;
            line-height: 45px;
            margin-left: 15px;

        }

        .select_target {
            width: 43px;
            height: 43px;
            border-left: 1px solid #e5e3e3;
            text-align: center;
            line-height: 43px;
        }
    }

    // 内容列表
    .content_list {
        .content_item {
            display: flex;
            align-items: center;
            height: 100px;
            border-bottom: 1px solid #e5e3e3;
            margin-left: 10px;
            color: black;

            img {
                width: 70px;
                height: 70px;
            }

            .text_content {
                height: 70px;
                width: 266px;
                margin-left: 10px;

                .title {
                    font-size: 16px;
                    height: 44px;
                }

                .play_num_renew {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    color: #A3A3AC;
                    font-size: 14px;

                    .bf_icon {
                        width: 14px;
                        height: 12px;
                        margin-right: 4px;
                    }

                    .play_num {
                        margin-right: 15px;
                    }
                }
            }


        }
    }

    .category {
        position: absolute;
        width: 100%;
        height: 400px;
        background: #fff;
        overflow: hidden;
        overflow-y: scroll;

        .category_lsit {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .category_item {
                width: 103px;
                height: 32px;
                font-size: 16px;
                margin-top: 14px;
                line-height: 32px;
                text-align: center;
                background: #f3f4f5;
            }
        }
    }

}

.active {
    --van-tab-font-size: 30px;
}
</style>